<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>个人中心</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>

        <script src="../../js/jquery.min.js"></script>

        <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>


        <style type="text/css">
            .input_right{
                border: none;
                text-align: right;
            }
        </style>
    </head>
    <body>

        <section class="aui-flexView">
            <section class="aui-scrollView">
                <div class="aui-panel">
                    <a href="javascript:void(0);" class="aui-panel-cell">

                        <div class="aui-panel-cell-hd">
                           <img src="images/user-logo.png" alt="" id="user_head_img" onclick="to_user_img_detail()">
                        </div>
                        <div class="aui-panel-cell-bd">
                            <h4 id="h4_user_name"></h4>
                        </div>
                        <div class="aui-panel-cell-fr">已实名认证
                        </div>
                    </a>
                </div>
                <div class="divHeight"></div>
                <div class="aui-card-list">
                    <a href="javascript:void(0);" class="aui-panel-cell aui-clear-border">
                        <div class="aui-panel-cell-bd">
                            <h4>用户名</h4>
                        </div>
                        <input type="text" id="user_name_id" name="user_name" readonly="readonly" value="<%=request.getParameter("user_name")%>" class="input_right" />
                    </a>
                    <div class="divHeight"></div>
                    <a href="javascript:void(0);" class="aui-panel-cell">
                        <div class="aui-panel-cell-bd">
                            <h4>昵称</h4>
                        </div>
                        <input type="text" id="user_nickname_id" name="user_nickname" value="<%=request.getParameter("user_nickname")%>" class="input_right" />
                    </a>
                    <a href="javascript:void(0);" class="aui-panel-cell">
                        <div class="aui-panel-cell-bd">
                            <h4>性别</h4>
                        </div>
                        <div id="sex_div">
                         <input type="radio" id="sex_man" name="sex" value="man" />男
                         <input type="radio" id="sex_woman" name="sex" value="woman" />女
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="aui-panel-cell aui-clear-border">
                        <div class="aui-panel-cell-bd">
                            <h4>登录密码</h4>
                        </div>
                        <input type="text" id="password_id" name="password" value="<%=request.getParameter("password")%>" class="input_right" />
                    </a>

                    <div class="aui-button">
                        <button class="aui-btn-out" onclick="change_user_info()">保存修改</button>
                    </div>
                <div class="aui-button">
                    <button class="aui-btn-out" onclick="out_login()">退出登录</button>
                </div>
                </div>
            </section>
        </section>



    </body>
    <script>

        var user_head_img="";
        initUser_info();
        var layer;
        layui.use('layer',function (){
            layer=layui.layer;
        })




        function out_login(){
            window.location.href="${pageContext.request.contextPath}/out_login.do";
        }

        function initUser_info(){
            $.ajax({
                url:"${pageContext.request.contextPath}/refresh_person_inside.do",
                success:function(data,status){
                    if(status==="success"){
                        var path="${pageContext.request.contextPath}/img_artificial/user_img/";
                        user_head_img=path+data.user_img;
                        $("#user_head_img").attr("src",user_head_img);
                        $('#h4_user_name').text(data.user_name);
                        $('#user_name_id').val(data.user_name);
                        $('#user_nickname_id').val(data.user_nickname);
                        $('#password_id').val(data.password);
                        if(data.sex==1)
                            $('#sex_man').attr("checked",true);
                        else
                            $('#sex_woman').attr("checked",true);
                    }
                }
            });
        }

        function change_user_info(){
            var user_name=$('#user_name_id').val();
            var user_nickname=$('#user_nickname_id').val();
            var password=$('#password_id').val();
            var sex_man=$('#sex_man').attr('checked')
            var sex_woman=$('#sex_woman').attr('checked');
            var sex;
            if(sex_man){
                sex=1;
            }else{
                sex=0;
            }
            $.ajax({
                url:"${pageContext.request.contextPath}/change_user_info.do",
                data:{
                    "user_name":user_name,
                    "user_nickname":user_nickname,
                    "password":password,
                    "sex":sex
                },
                success:function (data,status){
                    if(status==="success"){
                        alert("信息已修改");
                    }
                }
            });
        }

        function to_user_img_detail(){
            var w=$(window).width()*0.85;
            var h=$(window).height()*0.65;
            layer.open({
                type:2,
                title:'修改头像',
                area:[w+'px',h+'px'],
                content:"user_img_detail.jsp?user_head_img_hidden="+user_head_img,
                cancel:function (index,layero){
                    var flag_edit=layer.getChildFrame('#flag_edit',index).val();
                    if(flag_edit=="yes"){
                        refreshHead_img();
                        <%--var path="${pageContext.request.contextPath}/img_artificial/user_img/";--%>
                        <%--var img_change=layer.getChildFrame('#user_head_img_change',index).val();--%>
                        <%--user_head_img=path+img_change;--%>
                        <%--$("#user_head_img").attr("src",user_head_img);--%>
                    }
                }
            })
        }
        function refreshHead_img(){
            $.ajax({
                url:"${pageContext.request.contextPath}/front_user/refresh_user_img.do",
                success:function (data,status){
                    if(status=="success"){
                        var path="${pageContext.request.contextPath}/img_artificial/user_img/";
                        user_head_img=path+data;
                        $("#user_head_img").attr("src",path+data);
                    }
                }
            })
        }
    </script>
</html>
